<template>
  <div class="company-container">
    <!-- 上层卡片 -->
    <el-card class="box-card up-card">
      <!-- 横向表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="queryForm"
      >
        <!-- 企业编号 -->
        <el-form-item label="企业编号" prop="rid">
          <el-input
            v-model="formInline.rid"
            placeholder="企业编号"
            class="company-id"
          ></el-input>
        </el-form-item>
        <!-- 企业名称 -->
        <el-form-item label="企业名称" prop="name">
          <el-input
            v-model="formInline.name"
            placeholder="企业名称"
            class="company-name"
          ></el-input>
        </el-form-item>
        <!-- 创建者 -->
        <el-form-item label="创建者" prop="username">
          <el-input
            v-model="formInline.username"
            placeholder="创建者"
            class="company-author"
          ></el-input>
        </el-form-item>
        <!-- 状态下拉框 -->
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="formInline.status"
            placeholder="请选择状态"
            class="company-state"
          >
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button>清空</el-button>
          <el-button type="primary" class="el-icon-plus" @click="showAddform"
            >新增企业</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 下层卡片 -->
    <el-card class="box-card down-card">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" class="data-table">
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column label="企业编号" prop="rid"></el-table-column>
        <el-table-column label="企业名称" prop="name"></el-table-column>
        <el-table-column label="简称" prop="short_name"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="create_time">
          <template slot-scope="scope">
            {{ scope.row.create_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">启用</span>
            <span class="active" v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="enterEdit(scope.row)"
              >编辑</el-button
            >
            <!-- 使用插槽变量进行判断 -->
            <el-button type="text" @click="changeStatus(scope.row.id)">
              {{ scope.row.status === 0 ? '启用' : '禁用' }}
            </el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="currentPage"
        :page-sizes="pageArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
      >
      </el-pagination>
    </el-card>
    <!-- 新增表单区域 -->
    <add ref="add_company"></add>
    <!-- 编辑区域 -->
  </div>
</template>

<script>
// 引入新增组件
import add from './add.vue'
// 导入接口
export default {
  components: { add },
  data () {
    return {
      // 表单数据
      formInline: {
        name: '',
        rid: '',
        username: '',
        status: ''
      },
      // 表格数据
      tableData: [],
      // 分页器数据
      currentPage: 1,
      pageSize: 2,
      totalPage: 2,
      pageArr: [2, 4, 6, 8, 10]
    }
  },
  created () {},
  methods: {
    // 弹出新增表单
    showAddform () {
      this.$refs.add_company.dialogFormVisible = true
    },
    // 表单方法
    onSubmit () {
      console.log('submit!')
    },
    // 表格方法
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    // 分页导航方法
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="less">
.company-container {
  // 上层卡片样式
  .up-card {
    // 横向表单样式
    .company-id {
      width: 100px;
      height: 39px;
    }
    .company-name {
      width: 149px;
      height: 39px;
    }
    .company-author {
      width: 100px;
      height: 39px;
    }
    .company-state {
      width: 149px;
      height: 39px;
    }
  }
  // 下层卡片样式
  .down-card {
    margin-top: 20px;
    // 表格样式
    .data-table {
      .el-table .cell {
        color: violet;
      }
    }
    // 分页器样式
    .el-pagination {
      margin-top: 30px;
      text-align: center;
    }
  }
  .active {
    color: red;
  }
}
</style>
